<template>
  <div id="printDom" class="printMain">
    <div
      v-for="(item, idx) in pages"
      :ref="e => (printDomRefs[idx] = e)"
      :key="idx"
      class="doc-container"
    >
      <mainPage
        :ref="e => (form[idx] = e)"
        :type="type"
        :formType="formType"
        :data="item"
        :idx="idx"
        :title="data.title"
      />
    </div>
    <div v-if="type === '打印'" class="mask"></div>
  </div>
</template>

<script>
import { defineComponent, nextTick, reactive, toRefs, watch } from 'vue'

import mainPage from './mainPage.vue'

export default defineComponent({
  name: 'AnxietySheet',
  components: { mainPage },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    records: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    },
    formType: {
      type: String,
      default: 'add'
    }
  },
  emits: ['setCanOperate'],
  setup(props, { emit }) {
    const state = reactive({
      pages: [], //表格数据
      printDomRefs: [],
      form: []
    })

    async function initData() {
      state.pages = props.records
      nextTick(() => {
        emit('setCanOperate', true)
      })
    }

    function returnDom() {
      return state.printDomRefs
    }

    function getParams() {
      const form = state.form[0]
      const obj = form.data
      obj.jsonText = JSON.stringify(form.pageData)
      return obj || {}
    }

    watch(
      () => props.records,
      val => {
        initData()
      },
      { immediate: true }
    )

    return {
      ...toRefs(state),
      initData,
      returnDom,
      getParams
    }
  }
})
</script>

<style lang="scss" scoped>
.printMain {
  position: relative;
  width: 840px;
  margin: 0 auto;
}

.doc-container {
  margin: 0 auto;
  width: 840px;
  // mac 下需写成像素单位，否则打印预览时空白
  height: 1188px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  padding: 0 20px;
}

.pageNum {
  margin-bottom: 15px;
}

.h {
  &-100 {
    height: 100%;
  }
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

@media print {
  .doc-container {
    border: none;
  }
}
</style>
